<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <title>关联BHPay账户</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #F8F8F8;
            font-size: 0.24rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFang-SC-Regular;
            color: #898989;
        }

        .switch {
            position: relative;
            -webkit-appearance: none;
            width: 0.74rem;
            height: 0.39rem;
            line-height: 1.21rem;
            background: #e1e1e1;
            border-radius: 0.3rem;
            outline: none;
            margin: 0;
            margin-top: 0.41rem;
            display: block;
            float: right;
        }

        .switch:before {
            position: absolute;
            left: 0;
            content: '';
            width: 0.39rem;
            height: 0.39rem;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0px 0px 0.05rem #ddd;
            transition: all 0.2s linear;
        }

        .openStyle {
            color: #999999;
            font-size: 0.22rem;
            float: right;
            padding-right: 0.2rem;
            line-height: 1.21rem;
            height: auto
        }

        .switch.lockOpen {
            background: #ffd203;
        }

        .switch.lockOpen:before {
            left: 0.35rem;
            transition: all 0.2s linear;
        }

        .quickPay {
            height: 1.21rem;
            background: #fff;
            padding: 0 0.29rem;
            text-align: left
        }

        .quickPay>div {
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-top: 0.015rem solid#eee;
            line-height: 1.21rem;
        }

        .quickPay img {
            width: 0.38rem;
            height: 0.29rem;
            vertical-align: middle
        }

        .quickPay .text {
            font-size: 0.28rem;
            color: #262626;
        }

        .quickPay .text>span {
            line-height: 0.29rem;
            vertical-align: middle;
            padding-left: 0.06rem;
        }

        .quickPay input {
            float: right;
        }

        .reheader {
            width: 100%;
            height: 4.12rem;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding-top: 0.89rem;
            background: #fff;
        }

        .reheader>.content {
            display: flex;
        }

        .reheader>.content>div {
            flex: 1;
        }

        .reheader>.content .img {
            width: 1.1rem;
            height: 1.1rem;
            border-radius: 100%;
        }

        .reheader>.content>.header_left>p:first-of-type {
            margin-top: 0.16rem;
            margin-bottom: 0.24rem;
        }

        .reheader>.content>.header_left>p:last-child {
            color: #262626;
            width: 2.4rem;
            word-break: break-all;
            word-wrap: break-word;
            font-size: 0.22rem;
        }

        .reheader>.content>.header_middle img {
            width: 0.64rem;
            height: 0.36rem;
            margin: 0.45rem 0.75rem 0.14rem 0.75rem;
        }

        .reheader>.content>.header_middle p {
            color: #F4C612;
        }

        .relate_btn {
            width: 6.88rem;
            height: 0.88rem;
            border-radius: 0.08rem;
            background-color: #FFD203;
            margin: 0.4rem 0.34rem 0.36rem 0.28rem;
            text-align: center;
        }

        .relate_btn p {
            color: #181818;
            line-height: 0.88rem;
            font-size: 0.28rem;
        }

        .relate_bottom {
            margin: 0 0.45rem auto 0.3rem;
        }

        .relate_bottom>p {
            line-height: 0.4rem;
        }

        .relate_bottom>p:first-child {
            color: #262626;
            font-size: 0.28rem;
            font-weight: bold;
            margin-bottom: 0.25rem;
        }

        .relate_bottom>p:nth-child(4),
        .relate_bottom>p:nth-child(5) {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 账户关联头部 -->
    <div class='reheader'>
        <div class="content">
            <!-- 左 -->
            <div class="header_left">
                <img class="img renrenImg" src="../../image/myicon.png">
                <p style="font-size:0.26rem;" class="userName"></p>
                <p class="phoneNumber"></p>
            </div>
            <!-- 中 -->
            <div class="header_middle">
                <img src="../../image/myjiantou.png">
                <p>已关联</p>
            </div>
            <!-- 右 -->
            <div class="header_left">
                <img class="img" id="bhpayImg" src="../../image/mybhp.png">
                <p style="font-size:0.26rem;" class="bhpuserName"></p>
                <p class="bhpayphoneNumber" style="margin-bottom: 0.24rem;"></p>
                <p class="BhpayNumber"></p>
            </div>
        </div>
    </div>
    <div class="quickPay">
        <div>
            <span class="text">
                <img src="../../image/bhpay_idcard.png" alt="BHPAY">
                <span>快捷支付</span>
            </span>
            <span type="checkbox" class="switch openBtn" id="openQuickPay"></span>
            <span id="openText" class="openStyle openBtn"></span>
        </div>
    </div>
    <!-- 更换关联账户按钮 -->
    <div class="relate_btn">
        <p>下载BHPay</p>
    </div>
    <!-- 温馨提示 -->
    <div class="relate_bottom">
        <p>温馨提示：</p>
        <p>
            1.关联BHPay账户后，双挖产出的BHP将自动分入BHPay钱包。
        </p>
        <p>
            2.分红将在BHPay钱包中发放。</p>
        <p>
            3.上述两条具体实施时间以提前公告为准，请提前关联
        </p>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var bhpayDownUrl = "";//bhpay下载地址
        $(".userName").text(account.user_name.length > 8 ? (account.user_name.slice(0, 6) + "...") : account.user_name);
        $(".phoneNumber").text(account.telphone.slice(0, 4) + "***" + account.telphone.slice(-4));
        $(".renrenImg").attr("src", account.avatar);
        app.getBhpayAbout(function (ret) {
            if (ret.code == 200) {
                fuctPhpayPay(ret.data.is_open_pay, ret.data.mobile, ret.data.max_limit_num);
                bhpayDownUrl = ret.data.down_uri;
                $(".bhpuserName").text(ret.data.name);
                $(".bhpayphoneNumber").text(ret.data.mobile);
                $(".BhpayNumber").text(ret.data.card_num.slice(0, 4) + " **** **** " + ret.data.card_num.slice(-4));
                if (ret.data.avator) { $("#bhpayImg").attr("src", ret.data.avator); }
            }
        })
        $(".relate_btn").on("click", function (e) {
            app.openSysNavi(bhpayDownUrl);
        });
        //开通和关闭bhpay小额支付ajax
        function httpOpenOrCloseBhpay(params, callback) {
            app.ajaxPro({
                url: "bhpay/avoid-pay",
                values: {
                    token: account.token,
                    smscaptcha: params.smscaptcha,//短信验证码
                    status: params.status//开通 1 /关闭 2
                },
                openFlower: true
            }, function (ret) {
                app.trigger('changeBhpaySts');
                callback(ret);
            })
        }
        // 发送验证码
        function sendMobileCode() {
            app.ajaxPro({
                url: "bhpay/sms",
                values: {
                    token: account.token
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    app.toast('验证码已发送至您的手机');
                } else {
                    app.toast('请勿重复获取验证码');
                }
            })
        }
        //封装整个快捷支付的开启和关闭点击方法和效果
        function fuctPhpayPay(target, mobile, max_limit_num) {
            // target为得到的开启状态，mobile为bhpay绑定手机号 , 限额数量
            var openBtn = $('.openBtn');//滑块点击范围
            var openQuickPay = $("#openQuickPay");//更改开关样式
            var openText = $(".openStyle");//开启/关闭的文字
            var isOpen = target == 1 ? true : false; //是否开启 关闭
            function openOrClose(bl) { //公共设置开关按钮样式
                isOpen = bl == true ? true : false;
                openText.text(bl == true ? '已开启' : '未开通');//已开启/未开通
                if (bl == true) openQuickPay.addClass('lockOpen');//lockOpen为开启，关闭则删除class lockOpen
                else openQuickPay.removeClass('lockOpen');//lockOpen为开启，关闭则删除class lockOpen
            }
            openOrClose(isOpen);
            openBtn.click(function (e) {
                var param = null;//dialog参数
                app.removeListen('confirm');
                app.removeListen('sendCodeAgain');
                app.removeListen('getCode');
                var ajaxParams = { smscaptcha: ' ',/*短信验证码 */   status: '',/*开通 1 /关闭 2*/ };
                if (isOpen == false) {
                    //开通
                    param = { dtype: "dialog49", data: { num: max_limit_num } };//提示开通
                    app.dialog(param);
                    app.listen('confirm', function (ret) {//点击确认开通 -> 弹出输入验证码
                        sendMobileCode();
                        param = {
                            dtype: "dialog50",
                            stopPropagation: true,
                            data: { mobile: mobile, sucEvt: 'getCode', sendCodeAgain: 'sendCodeAgain' }
                        };
                        //noStopProgation阻止body点击默认关闭；
                        app.dialog(param);
                        app.listen('sendCodeAgain', function () {//重新发送验证码
                            sendMobileCode();
                        });
                        app.listen('getCode', function (ret) {
                            var yzm = ret.value.yzm;//得到输入返回到此页面的验证码
                            ajaxParams.smscaptcha = yzm;
                            ajaxParams.status = 1;
                            httpOpenOrCloseBhpay(ajaxParams, function (result) {
                                console.log('result' + JSON.stringify(result));
                                if (result.code == 200) {
                                    app.closeF('dialog');
                                    app.toast('已开启快捷支付');
                                    openOrClose(true);
                                } else {
                                    app.toast('验证码不正确');
                                }
                            });
                        })
                    })
                } else {
                    param = { dtype: "dialog51" };//提示关闭
                    app.dialog(param);
                    app.listen('confirm', function (ret) {//点击确认关闭
                        ajaxParams.smscaptcha = 'null';
                        ajaxParams.status = 2;
                        httpOpenOrCloseBhpay(ajaxParams, function (result) {
                            if (result.code == 200) {
                                app.closeF('dialog');
                                app.toast('已关闭快捷支付');
                                openOrClose(false);
                            } else {
                                app.toast(ret.message);
                            }
                        });
                    })
                }
            })
        }
        app.headerMap();
    }

</script>

</html>